<!--
 * @Author: Vi卡农
 * @Date: 2019-11-11 10:48:37
 * @LastEditTime: 2020-04-02 15:19:44
 * @Description: --论坛
 * @FilePath: \cshf_admin\src\views\modules\demo\news.vue
 -->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form-item>
        <el-input
          v-model="dataForm.title"
          :placeholder="$t('news.title')"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        类型：
        <ren-select
          v-model="dataForm.type"
          dict-type="bbsType"
          placeholder="类型"
          class="FormSelect"
        ></ren-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="daterange"
          type="daterange"
          value-format="yyyy-MM-dd"
          :range-separator="$t('datePicker.range')"
          :start-placeholder="$t('datePicker.start')"
          :end-placeholder="$t('datePicker.end')"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addBbsHandle()">发表</el-button>
      </el-form-item>
    </el-form>
    <div v-for="item of dataList" :key="item.id" class="bbs">
      <el-card class="me-area" :body-style="{ padding: '16px' }">
        <div class="me-article-header">
          <a @click="view(item.id)" class="me-article-title">{{
            item.title
          }}</a>
          <span class="me-pull-right me-article-count">
            <i class="el-icon-chat-dot-round"></i>&nbsp; {{ item.writeNum }}
          </span>
          <span class="me-pull-right me-article-count">
            <i class="el-icon-view"></i>&nbsp; {{ item.readNum }}
          </span>
        </div>

        <div class="me-artile-description">
          <div v-html="item.content"></div>
        </div>

        <div class="me-article-footer">
          <!-- <el-image class="me-view-picture" :src="item.headurl"></el-image> -->
          <span class="me-article-author">
            <i class="el-icon-s-custom"></i>&nbsp;{{
              item.deptName + item.userName
            }}
          </span>
          <el-tag size="mini" type="success">{{
            $getDictLabel("bbsType", item.type)
          }}</el-tag>
          <!-- <el-tag v-for="t in tags" :key="t.tagname" size="mini" type="success">{{t.tagname}}</el-tag> -->

          <span class="me-pull-right me-article-count">
            <i class="el-icon-time"></i>&nbsp;{{ item.createDate }}
          </span>
        </div>
      </el-card>
    </div>

    <div class="paginationBox">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
      ></el-pagination>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <add-bbs
      v-if="addBbsVisible"
      ref="AddBbs"
      @refreshDataList="getDataList"
    ></add-bbs>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddBbs from "./bbs-add";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/trends/trendsbbs/page",
        getDataListIsPage: true,
        deleteURL: "/trends/trendsbbs",
        deleteIsBatch: true,
      },
      addBbsVisible: false,
      daterange: null,
      dataForm: {
        title: "",
        type: "",
        startDate: "",
        endDate: "",
      },
    };
  },
  components: {
    AddBbs,
  },
  methods: {
    view(id) {
      this.addReadNum(id),
        this.$router.push({
          name: "bbsinfo",
          query: {
            ID: id,
          },
        });
    },
    addBbsHandle() {
      this.addBbsVisible = true;
      this.$nextTick(() => {
        this.$refs.AddBbs.init();
      });
    },
    addReadNum(id) {
      this.$http
        .get(`/trends/trendsbbs/addreadnum`, {
          params: {
            bbsId: id,
          },
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
        })
        .catch(() => {});
    },
  },
  watch: {
    daterange(val) {
      this.dataForm.startDate = val[0];
      this.dataForm.endDate = val[1];
    },
  },
};
</script>
<style scoped>
.me-article-header {
  /*padding: 10px 18px;1*/
  padding-bottom: 10px;
}

.me-article-title {
  font-weight: 600;
  font-size: 20px;
}

.me-article-icon {
  padding: 3px 8px;
}

.me-article-count {
  color: #a6a6a6;
  padding-left: 14px;
  font-size: 13px;
}

.me-pull-right {
  float: right;
}

.me-artile-description {
  font-size: 13px;
  line-height: 24px;
  margin-bottom: 10px;
}

.me-article-author {
  color: #a6a6a6;
  padding-right: 18px;
  font-size: 13px;
}

.el-tag {
  margin-left: 6px;
}
.el-card {
  border-radius: 0;
}

.bbs:not(:first-child) {
  margin-top: 15px;
}
</style>